<template>
  <div class="app-container">
    <!-- 搜索区域使用 transform 包裹 -->
    <el-collapse-transition>
      <el-card v-show="isFilterVisible" class="search-wapper">
        <div>
          <el-form ref="form" :model="form" :inline="true" label-width="80px">
            <el-form-item label="">
              <el-select
                v-model="listQuery.customerType"
                clearable
                size="small"
                placeholder="请选择客户类别"
                style="width: 200px"
              >
                <el-option
                  v-for="item in customerTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-input
                v-model="listQuery.keyword"
                size="small"
                style="width: 300px"
                placeholder="输入客户编号/名称/联系人/电话/送货地址/备注"
                clearable
              />
            </el-form-item>
            <el-form-item label="">
              <el-checkbox
                v-model="listQuery.includeSalesperson"
              >包含销售人员查询</el-checkbox>
            </el-form-item>
            <el-form-item label="">
              <el-checkbox
                v-model="listQuery.showDisabled"
                style="margin-left: 15px"
              >显示等用客户</el-checkbox>
            </el-form-item>
            <el-form-item label="">
              <el-button
                type="primary"
                size="small"
                style="margin-left: 15px"
                @click="handleFilter"
              >查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </el-collapse-transition>

    <!-- 操作按钮区域 -->

    <el-card>
      <div class="table-operations">
        <el-button
          type="primary"
          size="small"
          class="filter-trigger"
          @click="isFilterVisible = !isFilterVisible"
        >{{ isFilterVisible?'收起':'检索' }}
          <i :class="['el-icon-arrow-down',{'is-reverse':isFilterVisible}]" />
        </el-button>
        <el-button
          type="success"
          size="small"
          @click="handleAdd"
        >新增</el-button>
        <el-button
          type="warning"
          size="small"
          @click="handleBatchEdit"
        >批量修改</el-button>
        <el-button type="danger" size="small" @click="handleDisable">禁用</el-button>
        <el-button type="success" size="small" @click="handleEnable">启用</el-button>
        <el-button type="primary" size="small" @click="handleImport">导入</el-button>
        <el-button type="primary" size="small" @click="handleExport">导出</el-button>
        <el-button size="small" @click="handleDelete">删除</el-button>
      </div>
      <!-- 表格区域 -->
      <el-table
        v-loading="listLoading"
        style="margin-top: 20px"
        :data="list"
        element-loading-text="加载中"
        border
        fit
        highlight-current-row
        header-cell-style="background-color: #f5f7fa; color: #333;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />

        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)">
              <i class="el-icon-edit" />
            </el-button>
            <el-button type="text" size="small" @click="handleView(scope.row)">
              <i class="el-icon-view" />
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="handleDelete(scope.row)"
            >
              <i class="el-icon-delete" />
            </el-button>
          </template>
        </el-table-column>

        <el-table-column label="客户类别" prop="customerType" align="center" />
        <el-table-column label="客户等级" prop="cLevelName" align="center" />
        <el-table-column label="客户编号" prop="number" align="center" />
        <el-table-column label="客户名称" prop="name" align="center" />
        <el-table-column
          label="收款条件"
          prop="newRecTypeName"
          align="center"
        />
        <el-table-column label="地区" prop="province" align="center" />
        <el-table-column label="销售人员" prop="employeeName" align="center" />
        <el-table-column label="联系人" prop="contacter" align="center" />
        <el-table-column
          label="纳税人识别号"
          prop="taxPayerNo"
          align="center"
        />
        <el-table-column label="开户银行" prop="bank" align="center" />
        <el-table-column
          label="银行账号"
          prop="cardNo"
          align="center"
          width="180"
        />
        <el-table-column label="手机" prop="mobile" align="center" />

        <!-- 新增列 -->
        <el-table-column label="应收款余额" prop="difMoney" align="center" />
        <el-table-column label="关联线路" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.routes && scope.row.routes.length > 0">
              {{ scope.row.routes[0].routeNo }} {{ scope.row.routes[0].name }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="省" prop="province" align="center" />
        <el-table-column label="市" prop="city" align="center" />
        <el-table-column label="区" prop="county" align="center" />
        <el-table-column
          label="送货地址"
          prop="deliveryAddress"
          align="center"
          width="180"
        />
        <el-table-column label="备注" align="center" />
        <el-table-column label="已授权用户" align="center" />
      </el-table>
      <!-- 分页 -->
      <el-row :gutter="10" style="margin-top: 20px" type="flex" justify="end">
        <el-pagination
          background
          :current-page="listQuery.page"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>

    <!-- 新增客户弹窗 -->
    <el-dialog
      title="新增客户"
      :visible.sync="dialogVisible"
      width="800px"
      :close-on-press-escape="false"
    >
      <el-form
        ref="customerForm"
        :model="customerForm"
        :rules="rules"
        label-width="100px"
        size="small"
      >
        <!-- 客户类型选择 -->
        <div class="form-section">
          <div class="section-header">
            <span class="type-label">类型</span>
            <el-radio-group v-model="customerForm.type">
              <el-radio :label="1">客户</el-radio>
              <el-radio :label="2">客户/供应商</el-radio>
            </el-radio-group>
          </div>
        </div>

        <!-- 基础信息 -->
        <div class="form-section">
          <div class="section-title">基础信息</div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="客户编号" prop="customerNo">
                <el-input v-model="customerForm.customerNo" placeholder="G00011" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户名称" prop="customerName" required>
                <el-input v-model="customerForm.customerName" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="客户类别" prop="customerType">
                <el-select v-model="customerForm.customerType" placeholder="类别">
                  <el-option label="华中地区" value="华中地区" />
                  <el-option label="华北地区" value="华北地区" />
                  <el-option label="华南地区" value="华南地区" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户等级" prop="customerLevel">
                <el-select v-model="customerForm.customerLevel" placeholder="请选择">
                  <el-option label="VIP客户" value="VIP" />
                  <el-option label="普通客户" value="NORMAL" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="余额日期">
                <el-date-picker
                  v-model="customerForm.balanceDate"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="期初应收款">
                <el-input v-model="customerForm.initialReceivable" type="number" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="交货方式">
                <el-select v-model="customerForm.deliveryMethod" placeholder="请选择">
                  <el-option label="空" value="" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="地区">
                <el-select v-model="customerForm.region" placeholder="请选择">
                  <el-option label="空" value="" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="收款条件">
                <el-select v-model="customerForm.paymentTerms" placeholder="请选择">
                  <el-option label="空" value="" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="关联线路">
                <el-input v-model="customerForm.relatedRoute" placeholder="点击选择">
                  <i slot="suffix" class="el-icon-more" />
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 发票信息 -->
        <div class="form-section">
          <div class="section-title">发票信息</div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="开票公司名">
                <el-input v-model="customerForm.invoiceCompany" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="纳税人识别号">
                <el-input v-model="customerForm.taxNumber" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="开户银行">
                <el-input v-model="customerForm.bankName" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="银行账号">
                <el-input v-model="customerForm.bankAccount" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="开票地址">
                <el-input v-model="customerForm.invoiceAddress" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开票电话">
                <el-input v-model="customerForm.invoicePhone" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Customer',
  data() {
    return {
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 20,
        keyword: '',
        customerType: '',
        includeSalesperson: false,
        showDisabled: false
      },
      customerTypeOptions: [
        { value: '', label: '全部' },
        { value: '华中地区', label: '华中地区' },
        { value: '华北地区', label: '华北地区' },
        { value: '华南地区', label: '华南地区' },
        { value: '广东省内', label: '广东省内' },
        { value: '批发', label: '批发' },
        { value: '零售', label: '零售' }
      ],
      multipleSelection: [],
      // 是否显示搜索区域
      isFilterVisible: false,
      dialogVisible: false,
      customerForm: {
        type: 1,
        customerNo: '',
        customerName: '',
        customerType: '',
        customerLevel: '',
        balanceDate: '',
        initialReceivable: '',
        deliveryMethod: '',
        region: '',
        paymentTerms: '',
        relatedRoute: '',
        invoiceCompany: '',
        taxNumber: '',
        bankName: '',
        bankAccount: '',
        invoiceAddress: '',
        invoicePhone: ''
      },
      rules: {
        customerNo: [
          { required: true, message: '请输入客户编号', trigger: 'blur' }
        ],
        customerName: [
          { required: true, message: '请输入客户名称', trigger: 'blur' }
        ],
        customerType: [
          { required: true, message: '请选择客户类别', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true

      // 模拟API调用获取数据
      setTimeout(() => {
        // 使用提供的真实数据
        const responseData = {
          status: 200,
          msg: 'success',
          data: {
            page: 1,
            total: 1,
            records: 17,
            rows: [
              {
                deliveryMethodName: '',
                city: '天津市',
                deliveryMethod: 0,
                newRecType: 4,
                county: '和平区',
                type: -10,
                delete: 0,
                cardNo:
                  'ENCR **** **** **** **** **** **** **** **** **** **** Fzk=',
                isExpress: 0,
                pinYin: 'kh1',
                recType: '月结',
                number: '1000000',
                linkManId: '12911692439991',
                customerType: '华中地区',
                bank: '金蝶银行',
                cLevelName: 'VIP客户',
                ROWNO: 1,
                province: '天津',
                deliveryAddress: '****',
                taxPayerNo: '91144030035123492H',
                id: '12911692439990',
                recTypeNum: 4,
                difMoney: 11502.45,
                newRecTypeName: '月结',
                employeeName: '销售-小东',
                mobile: '159****1234',
                employeeId: '1291169244936',
                cLevel: 2,
                taxRate: 0,
                contacter: '张',
                regionId: '',
                name: '客户1',
                recId: '129568994777'
              },
              {
                deliveryMethodName: '',
                city: '广州市',
                deliveryMethod: 0,
                newRecType: 4,
                county: '海珠区',
                type: -10,
                delete: 0,
                isExpress: 0,
                pinYin: 'kh2',
                recType: '月结',
                number: '1000001',
                routes: [
                  {
                    id: '1292564920921587',
                    routeNo: '3号线',
                    name: '五一广场到望城坡地铁站',
                    status: '',
                    contactId: 12911692439993,
                    carNumber: '',
                    deliveryMan: '',
                    driver: ''
                  }
                ],
                linkManId: '12911692439994',
                customerType: '华北地区',
                cLevelName: '零售客户',
                ROWNO: 2,
                province: '广东省',
                deliveryAddress: '***',
                id: '12911692439993',
                recTypeNum: 4,
                difMoney: 5846.57,
                newRecTypeName: '月结',
                employeeName: '销售-小东',
                mobile: '183****0000',
                employeeId: '1291169244936',
                cLevel: 0,
                taxRate: 0,
                contacter: '李先生',
                regionId: '',
                name: '客户2',
                recId: '129568994787'
              },
              {
                deliveryMethodName: '',
                city: '北京市',
                deliveryMethod: 0,
                newRecType: 2,
                county: '西城区',
                type: -10,
                delete: 0,
                isExpress: 0,
                pinYin: 'kh3',
                recType: '货到付款',
                number: '1000002',
                linkManId: '12911692439995',
                customerType: '华北地区',
                cLevelName: '零售客户',
                ROWNO: 3,
                province: '北京',
                deliveryAddress: '***',
                id: '12911692439966',
                recTypeNum: 2,
                difMoney: 3839.76,
                newRecTypeName: '货到付款',
                employeeName: '销售-小东',
                mobile: '182****1234',
                employeeId: '1291169244936',
                cLevel: 0,
                taxRate: 0,
                contacter: '王',
                regionId: '',
                name: '客户3',
                recId: '129568994795'
              },
              {
                deliveryMethodName: '',
                deliveryMethod: 0,
                newRecType: 5,
                type: -10,
                delete: 0,
                isExpress: 0,
                pinYin: 'kh4-l',
                recType: '限期收款',
                number: '1000003',
                linkManId: '12911692439996',
                customerType: '华南地区',
                cLevelName: '折扣等级二',
                ROWNO: 4,
                deliveryAddress: '江苏省南京********',
                id: '12911692439969',
                recTypeNum: 5,
                difMoney: 3904.5,
                newRecTypeName: '限期收款',
                employeeName: '销售-小东',
                mobile: '182****1234',
                employeeId: '1291169244936',
                cLevel: 4,
                taxRate: 0,
                contacter: '赵',
                regionId: '',
                name: '客户4-罗',
                recId: '129568994801'
              },
              {
                deliveryMethodName: '',
                city: '西安市',
                deliveryMethod: 0,
                newRecType: 1,
                county: '碑林区',
                type: -10,
                delete: 0,
                isExpress: 0,
                recType: '现结',
                number: '1000004',
                linkManId: '12911692439997',
                customerType: '批发',
                cLevelName: '批发客户',
                ROWNO: 5,
                province: '陕西省',
                deliveryAddress: '*',
                id: '12911692439973',
                recTypeNum: 1,
                difMoney: 9907.48,
                newRecTypeName: '现结',
                employeeName: '销售-小东',
                mobile: '183****0000',
                employeeId: '1291169244936',
                cLevel: 1,
                taxRate: 13,
                contacter: '马路',
                regionId: '',
                name: '客户5',
                recId: '129568994806'
              },
              {
                deliveryMethodName: '',
                city: '西安市',
                deliveryMethod: 0,
                newRecType: 3,
                county: '长安区',
                type: -10,
                delete: 0,
                isExpress: 0,
                recType: '不固定账期',
                number: '1000005',
                linkManId: '12911692439998',
                customerType: '广东省内',
                cLevelName: '折扣等级一',
                ROWNO: 6,
                province: '陕西省',
                deliveryAddress: '***',
                id: '12911692439976',
                recTypeNum: 3,
                difMoney: -5018.5,
                newRecTypeName: '不固定账期',
                employeeName: '销售-小东',
                mobile: '180****0000',
                employeeId: '1291169244936',
                cLevel: 3,
                taxRate: 13,
                contacter: '周',
                regionId: '',
                name: '客户6',
                recId: '129568994811'
              },
              {
                deliveryMethodName: '',
                deliveryMethod: 0,
                newRecType: 3,
                type: -10,
                delete: 0,
                isExpress: 0,
                recType: '不固定账期',
                number: '1000006',
                linkManId: '12911692439999',
                customerType: '华中地区',
                cLevelName: 'VIP客户',
                ROWNO: 7,
                deliveryAddress: '甘肃省天水********',
                id: '12911692439978',
                recTypeNum: 3,
                difMoney: 7971.24,
                newRecTypeName: '不固定账期',
                employeeName: '销售-小李',
                mobile: '182****1234',
                employeeId: '1291169244935',
                cLevel: 2,
                taxRate: 13,
                contacter: '吴',
                regionId: '',
                name: '客户7',
                recId: '129568994820'
              },
              {
                deliveryMethodName: '',
                city: '北京市',
                deliveryMethod: 0,
                newRecType: 4,
                county: '东城区',
                type: -10,
                delete: 0,
                isExpress: 0,
                recType: '月结',
                number: '1000007',
                linkManId: '129116924391000',
                customerType: '批发',
                cLevelName: '批发客户',
                ROWNO: 8,
                province: '北京',
                deliveryAddress: '***',
                id: '12911692439980',
                recTypeNum: 4,
                difMoney: 8260.47,
                newRecTypeName: '月结',
                employeeName: '销售-小李',
                mobile: '159****1234',
                employeeId: '1291169244935',
                cLevel: 1,
                taxRate: 13,
                contacter: '郑',
                regionId: '',
                name: '客户8',
                recId: '129568994825'
              },
              {
                deliveryMethodName: '',
                deliveryMethod: 0,
                newRecType: 3,
                type: -10,
                delete: 0,
                isExpress: 0,
                recType: '不固定账期',
                number: '1000008',
                linkManId: '129116924391001',
                customerType: '华中地区',
                cLevelName: 'VIP客户',
                ROWNO: 9,
                deliveryAddress: '广东省佛山********',
                id: '12911692439982',
                recTypeNum: 3,
                difMoney: 10728.65,
                newRecTypeName: '不固定账期',
                employeeName: '销售-小李',
                mobile: '175****1234',
                employeeId: '1291169244935',
                cLevel: 2,
                taxRate: 13,
                contacter: '王',
                regionId: '',
                name: '客户9',
                recId: '129568994830'
              },
              {
                deliveryMethodName: '',
                city: '深圳市',
                deliveryMethod: 0,
                newRecType: 1,
                county: '南山区',
                type: -10,
                delete: 0,
                isExpress: 0,
                pinYin: 'ls',
                recType: '现结',
                number: '1000009',
                linkManId: '1297595359142899',
                customerType: '零售',
                cLevelName: '零售客户',
                ROWNO: 10,
                province: '广东省',
                deliveryAddress: '**',
                id: '129116924391002',
                recTypeNum: 1,
                difMoney: 18250.05,
                newRecTypeName: '现结',
                employeeName: '销售-小李',
                mobile: '183****8910',
                employeeId: '1291169244935',
                cLevel: 0,
                taxRate: 0,
                contacter: '小李',
                regionId: '',
                name: '零售',
                recId: '129568994837'
              },
              {
                deliveryMethodName: '',
                employeeName: '销售-小李',
                deliveryMethod: 0,
                newRecType: 2,
                employeeId: '1291169244935',
                type: -10,
                delete: 0,
                isExpress: 0,
                cLevel: 1,
                pinYin: 'pf',
                recType: '货到付款',
                number: '1000010',
                taxRate: 0,
                customerType: '批发',
                cLevelName: '批发客户',
                linkManId: '',
                ROWNO: 11,
                regionId: '',
                name: '批发',
                id: '1298092859201',
                recTypeNum: 2,
                difMoney: 23441.82,
                recId: '129568994842',
                newRecTypeName: '货到付款'
              },
              {
                deliveryMethodName: '',
                employeeName: '销售-小李',
                deliveryMethod: 0,
                newRecType: 4,
                employeeId: '1291169244935',
                type: -10,
                delete: 0,
                isExpress: 0,
                cLevel: 1,
                pinYin: 'sppfzx',
                recType: '月结',
                number: '1000012',
                taxRate: 0,
                cLevelName: '批发客户',
                linkManId: '',
                ROWNO: 12,
                regionId: '',
                name: '食品批发中心',
                id: '1298791739381254',
                recTypeNum: 4,
                difMoney: 0,
                recId: '1298792039391771',
                newRecTypeName: '月结'
              },
              {
                deliveryMethodName: '',
                employeeName: '销售-小李',
                deliveryMethod: 0,
                newRecType: 1,
                employeeId: '1291169244935',
                type: -10,
                delete: 0,
                isExpress: 0,
                cLevel: 0,
                pinYin: 'kh',
                recType: '现结',
                number: '1000013',
                cLevelName: '零售客户',
                linkManId: '',
                ROWNO: 13,
                regionId: '',
                name: '客户',
                id: '129729370919360',
                recTypeNum: 1,
                difMoney: 167.95,
                recId: '129568994857',
                newRecTypeName: '现结'
              },
              {
                deliveryMethodName: '',
                employeeName: '销售-小李',
                deliveryMethod: 0,
                newRecType: 4,
                employeeId: '1291169244935',
                type: -10,
                delete: 0,
                isExpress: 0,
                cLevel: 1,
                pinYin: 'yffsp',
                recType: '月结',
                number: '1000014',
                taxRate: 0,
                customerType: '批发',
                cLevelName: '批发客户',
                linkManId: '',
                ROWNO: 14,
                regionId: '',
                name: '要发发食品',
                id: '1297595219176871',
                recTypeNum: 4,
                recId: '1298792039391771',
                newRecTypeName: '月结'
              },
              {
                deliveryMethodName: '',
                employeeName: '销售-小李',
                deliveryMethod: 0,
                newRecType: 4,
                employeeId: '1291169244935',
                type: -10,
                delete: 0,
                isExpress: 0,
                cLevel: 0,
                pinYin: 'xdsp',
                recType: '月结',
                number: '1000015',
                taxRate: 0,
                customerType: '广东省内',
                cLevelName: '零售客户',
                linkManId: '',
                ROWNO: 15,
                regionId: '',
                name: '小蝶食品',
                id: '1297595219176900',
                recTypeNum: 4,
                difMoney: -7735.67,
                recId: '1298792039391771',
                newRecTypeName: '月结'
              },
              {
                deliveryMethodName: '',
                deliveryMethod: 0,
                newRecType: 0,
                type: -10,
                delete: 0,
                isExpress: 0,
                pinYin: 'cs111',
                recType: '',
                number: 'G00009',
                linkManId: '1298093289379883',
                cLevelName: '零售客户',
                ROWNO: 16,
                deliveryAddress: '广东省深圳********',
                id: '1298093289379882',
                recTypeNum: 0,
                difMoney: -1992.02,
                newRecTypeName: '',
                employeeName: '1号仓库管员',
                employeeId: '129809521914767',
                cLevel: 0,
                taxRate: 0,
                contacter: '测试',
                regionId: '',
                name: '测试111',
                recId: '0'
              },
              {
                deliveryMethodName: '',
                city: '深圳市',
                deliveryMethod: 0,
                newRecType: 0,
                county: '南山区',
                type: -10,
                delete: 0,
                isExpress: 0,
                pinYin: 'szltspgs',
                recType: '',
                number: 'G00010',
                linkManId: '1292629938123',
                customerType: '广东省内',
                cLevelName: '折扣等级一',
                ROWNO: 17,
                province: '广东省',
                deliveryAddress: '*****',
                id: '129123992292806',
                recTypeNum: 0,
                difMoney: -2064.99,
                newRecTypeName: '',
                employeeName: '销售-小李',
                mobile: '135****0000',
                employeeId: '1291169244935',
                cLevel: 3,
                taxRate: 0,
                contacter: '莫小姐',
                regionId: '',
                name: '深圳蓝天食品公司',
                recId: '0'
              }
            ],
            userdata: ''
          }
        }

        this.list = responseData.data.rows
        this.total = responseData.data.records
        this.listLoading = false
      }, 500)
    },
    // 分页
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    // 分页
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleAdd() {
      this.dialogVisible = true
    },
    handleEdit(row) {
      // 处理编辑
      this.$message({
        message: '编辑客户: ' + row.name,
        type: 'info'
      })
    },
    handleView(row) {
      // 处理查看
      this.$message({
        message: '查看客户: ' + row.name,
        type: 'info'
      })
    },
    // 删除
    handleDelete(row) {
      // 处理删除
      this.$confirm('此操作将永久删除该客户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleBatchEdit() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          message: '请选择要修改的客户',
          type: 'warning'
        })
        return
      }
      this.$message({
        message: '批量修改选中的客户',
        type: 'info'
      })
    },
    handleEnable() {
      // 处理启用
      this.$message({
        message: '启用客户',
        type: 'info'
      })
    },
    handleDisable() {
      // 处理禁用
      this.$message({
        message: '禁用客户',
        type: 'info'
      })
    },
    handleImport() {
      // 处理导入
      this.$message({
        message: '导入客户',
        type: 'info'
      })
    },
    handleExport() {
      // 处理导出
      this.$message({
        message: '导出客户',
        type: 'info'
      })
    },
    handleSubmit() {
      this.$refs.customerForm.validate((valid) => {
        if (valid) {
          // 提交表单逻辑
          console.log('submit form', this.customerForm)
          this.dialogVisible = false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.filter-container {
  padding-bottom: 15px;
  margin-bottom: 15px;
}
.button-container {
  margin-bottom: 15px;
}
.search-wapper {
  margin-bottom: 15px;
}
.table-operations {
  margin-bottom: 15px;
}
.filter-trigger .el-icon-arrow-down {
  margin-left: 5px;
  transition: transform 0.3s;
}
.filter-trigger .el-icon-arrow-down.is-reverse {
  transform: rotate(180deg);
}

// 弹窗表单样式
.form-section {
  margin-bottom: 20px;

  .section-header {
    margin-bottom: 20px;
    .type-label {
      margin-right: 15px;
      font-weight: bold;
    }
  }

  .section-title {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 20px;
    padding-left: 10px;
    border-left: 4px solid #409EFF;
  }
}

.el-form {
  .el-select {
    width: 100%;
  }
}

// 底部按钮
.dialog-footer {
  text-align: right;
}

// 表单项间距
.el-row {
  margin-bottom: 15px;
}
</style>
